<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
let _TestLayer = null;

// 创建一个自定义图层
// Events 类为一个单独使用的 事件委托类，
// 可以为函数添加 on ， off ，run 等方法。
class TestEntity extends simpleMap.Events {
    constructor(options, parent) {
        super();
        // 注意：父子 EntityTypeName 属性一致时，才可以触发 点击事件
        this.EntityTypeName = 'PlatformEntity'
        this.parent = parent;
        this.id = options.id || simpleMap.util.uuid();

        // 创建一个原始 Entity
        this.Entity = new Cesium.Entity({
            // 此处为了防止元素ID 重名，故将 this.EntityTypeName 和 id 进行拼接
            id: this.EntityTypeName + this.id,
            show: true,
            // _Source 对象指向自己，是点击事件实现的另一个必要调条件
            _Source: this,
        });
        // simpleMap.util.CreatePosition 函数，用于将 经纬度坐标点转换为 地图坐标点
        this.Entity.position = simpleMap.util.CreatePosition(options.point);
        // 创建一个圆形
        this.Entity.ellipse = {
            semiMinorAxis: options.radius,
            semiMajorAxis: options.radius,
            // simpleMap.util.formarColor 函数 将 hex 颜色色号转换为 地图渲染色号
            material: simpleMap.util.formarColor(options.color),
            // 将高度调整高一些，以防止 绘制图形在3D 模式下穿模
            height: 1000,
        }
        // 给对象添加点击事件绑定
        options.onClick && this.on('Click', options.onClick, this);
        options.onRightClick && this.on('Click', options.onClick, this);
    }
    // 单独控制元素显示隐藏
    set show(type) {
        this.Entity.show = !!type;
    }
    get show() {
        return this.Entity.show
    }
};

// 这里可以直接继承 BasicDataSource 类，来快速创建自定义图层
// 封装方法参考 BasicDataSource 类
class TestLayer extends simpleMap.BasicDataSource {
    constructor(parent, options = {}) {
        // 这里继承类的参数，只有 ID，父级地图 和 一般配置选项
        super(simpleMap.util.uuid(), parent, options);
        // 注意：父子 EntityTypeName 属性一致时，才可以触发 点击事件
        this.EntityTypeName = 'PlatformEntity'
    }
    // 这个方法需要自行实现，如何添加一个元素
    add(options) {
        var Entity = new TestEntity(options, this);
        this._Mapping[Entity.id] = Entity;
        // 将子元素的 Entity 元素 添加到 地图上
        this._Entities.add(Entity.Entity);
        return Entity;
    }
}

export default {
    data() {
        return {
            SenceMode: '2D'
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();

        // 创建自定义图层
        _TestLayer = new TestLayer(map, { Click: true, RightClick: true });

        // 绑定点击事件
        _TestLayer.on('Click', (item) => {
            console.log(item);
        })
        // 生成随机元素值
        var _testArray = [];
        for (let i = 0; i < 100; i++) {
            _testArray.push({
                radius: 20000, // 半径
                point: { longitude: 115.0 + (i * 0.2), latitude: 37.0 + (i * 0.2) }, // 圆心点
                color: '#DD00DDCC', // 颜色
            });
        };
        // 批量添加自定义图层元素
        _TestLayer.Adds(_testArray);
    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            map.SenceMode = type;
        },
    },
    beforeDestroy() {
        // 注销自定义图层
        _TestLayer && _TestLayer.Destroy();

        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>